<template>
  <div class="">
    <!-- view-wrapper -->
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" >
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="queryParams.name" placeholder="请输入内容" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="活动类型"  prop="activityType">
          <el-select v-model="queryParams.activityType" placeholder="全部" size="small" @change="changeActivity">
            <el-option v-for="item in boxActivityType" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="盲盒背景"  prop="type" >
          <el-select v-model="queryParams.type" placeholder="全部" size="small" :disabled ="queryParams.activityType ==''">
            <el-option v-for="item in boxTypeList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <div class="listBox_head">
        <el-button type="primary" @click="getAdd">新增盲盒活动</el-button>
        <!-- <el-button type="primary" @click="getOrder">盲盒订单</el-button> -->
      </div>
      <el-table v-loading="loading" :data="activityList" stripe border>
        <el-table-column label="序号" type="index" width="55" align="center" fixed />
        <el-table-column label="活动类型" align="center" prop="" :show-overflow-tooltip="true" >
          <template slot-scope="scope">
            <dict-tag :options="boxActivityType" :value="scope.row.activityType" />
          </template>
        </el-table-column>
        <el-table-column label="活动名称" align="center" prop="name" :show-overflow-tooltip="true" />
        <el-table-column label="盲盒背景" align="center" prop="type" :show-overflow-tooltip="true">
          <template slot-scope="scope"> 
            <dict-tag :options="boxTypeAllList" :value="scope.row.type" />
          </template>
        </el-table-column>
        <el-table-column label="开始时间" align="center" prop="startTime" :show-overflow-tooltip="true" />
        <el-table-column label="结束时间" align="center" prop="endTime" :show-overflow-tooltip="true" />
        <el-table-column label="参与人数" align="center" prop="customerNum" :show-overflow-tooltip="true"/>
        <el-table-column label="购买盲盒数" align="center" prop="buyAmount" :show-overflow-tooltip="true"/>
        <el-table-column label="盲盒开启数" align="center" prop="boxAmount" :show-overflow-tooltip="true" />
        <!-- <el-table-column label="目标金额" align="center" prop="accumulateMoney" :show-overflow-tooltip="true" />
        <el-table-column label="奖池金额" align="center" prop="payMoney" :show-overflow-tooltip="true" /> -->
        <el-table-column label="活动状态" align="center" :formatter="handleStatus" prop="assetUsable" :show-overflow-tooltip="true" />
        <!-- <el-table-column label="活动链接" align="center" prop="url" :show-overflow-tooltip="true" /> -->
        <el-table-column label="活动链接" align="center" prop="url"  />
        <el-table-column label="盲盒活动是否显示" align="center" prop="isShow" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span v-if="scope.row.isShow == 1">显示</span>
              <span v-else>隐藏</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleEdit(scope.row)" v-if="scope.row.status == 1">继续编辑</el-button>
            <el-button size="mini" type="text" @click="handleDetail(scope.row)" v-if="scope.row.status != 1">编辑</el-button>
            <el-button size="mini" type="text" @click="handleActivity(scope.row)">活动详情</el-button>
            <el-button size="mini" type="text" @click="handleIsShow(scope.row)"  v-if="scope.row.isShow == 2">前端显示</el-button>
            <el-button size="mini" type="text" @click="handleIsShow(scope.row)" v-if="scope.row.isShow == 1">前端隐藏</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" 
        :total="total" 
        :page.sync="queryParams.pageNum" 
        :limit.sync="queryParams.pageSize"
        @pagination="getList" />

    </div>
  </div>
  
</template>

<script>
  import {
    activityList,
    adminDict,
    activityShow
  } from "@/api/blindBox";

  export default {
    name: "Customer",
    components: {

    },
    data() {
      return {
        boxTypeList: [],//背景类型
        boxTypeAllList: [],//全部背景类型
        boxActivityType: [], //活动类型
        // 显示搜索条件
        showSearch: true,
        // 遮罩层
        loading: false,
        // 导出遮罩层
        exportLoading: false,
        // 总条数
        total: 0,
        // 会员列表表格数据
        activityList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: '',
          type: '',//盲盒背景类型 shenye_box_type
          activityType:'', //活动类型  box_activity_type
        },
      };
    },
    created() {
      this.getActivityType()
      this.getadminDict()
      this.getList();
    },
    methods: {
        //获取全部盲盒类型
      getadminDict() {
        const params = {
          dictType: "shenye_box_type",
        };
        adminDict(params).then((res) => {
          this.boxTypeAllList = res.result[0].dictList;
        });
      },
      changeActivity(e) {
        this.queryParams.type = ''
        console.log(e)
        //获取商户类型字典
        if(e == 2){
          // 自动风格
          const params = {
            dictType: "shenye_auto_box_type",
          };
          adminDict(params).then((res) => {
            this.boxTypeList = res.result[0].dictList;
          });
        }else{
          // 手动风格
          const params = {
            dictType: "shenye_manual_box_type",
          };
          adminDict(params).then((res) => {
            this.boxTypeList = res.result[0].dictList;
          });
        }
      },
      //获取活动类型
      getActivityType() {
        const params = {
          dictType: "box_activity_type",
        };
        adminDict(params).then((res) => {
          this.boxActivityType = res.result[0].dictList;
        });
      },
      /** 查询盲盒活动列表 */
      getList() {
        this.loading = true;
        activityList(this.queryParams).then(response => {
          console.log('response',response)
          this.total = response.result.total
          this.activityList = response.result.records
          this.activityList = this.activityList.map(item => {
            // console.log('item',item)
            Object.keys(item).forEach(key => {
              if (item[key] === '') {
                item[key] = '- -'

              }
            })
            console.log('item',item)
            return item
          })
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm();
        this.$refs["queryForm"].resetFields();
        console.log('this.queryParams', this.queryParams)
        this.handleQuery();
      },
      //新增
      getAdd(){
        this.$router.push({
          path:'/blindBox/add-blindBox',
          query: {
            type: 'add'
          }
        })
      },  
      //盲盒订单
      getOrder(){
        this.$router.push({
          path: '/blindBox/boxOrder-List',
        })
      },
      handleEdit(row){
        this.$router.push({
          path:'/blindBox/add-blindBox',
          query: {
            type: 'edit',
            id: row.id,
            status: row.status 
          }
        })
      },
      handleDetail(row){
        this.$router.push({
          path:'/blindBox/add-blindBox',
          query: {
            type: 'detail',
            id: row.id,
            status: row.status 
          }
        })
      },
      /* 活动详情 */
      handleActivity(row){
        this.$router.push({
          path:'/blindBox/activity-detail',
          query: {
            id: row.id
          }
        })
      },
      //前端显示、隐藏
			handleIsShow(row){
        if(row.isShow == 1){
          var title = '是否隐藏'
        }else if(row.isShow == 2){
          var title = '是否显示'
        }
        this.$confirm(title, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            activityShow(row.id).then(res => {
              this.$message.success('操作成功')
              this.getList()
            })
          }).catch(() => {});
      },
      handleStatus(row){
        if(row.status == 1){
          return '草稿'
        }else if(row.status == 2){
          return '待开始'
        }else if(row.status == 3){
          return '进行中'
        }else if(row.status == 4){
          return '已结束'
        }
      },
    }
  };

</script>
<style lang="scss" scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
    margin-top: 10px;
  }
  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px 20px;
    margin-top: 10px;
  }
  .listBox_head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .el-button{
      height: 35px;
    }
    .btnBox{
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      margin-left: 20px;
    }
  }
</style>
